<template>
 <ex-dialog width="520px" class="ex-diolog" title="新增注销商户申请" :visible="visible" @closeDialog="handleClose">
    <el-form :model="ruleForm"  :rules="rules" ref="ruleForm" label-width="auto" class="demo-ruleForm">
     <el-form-item label="选择注销商户类型：" prop="type" style="margin-bottom: 20px;">
        <el-radio-group v-model="ruleForm.type" @input="inputChange">
            <el-radio :label="1">连锁总店</el-radio>
            <el-radio :label="2">连锁门店</el-radio>
            <el-radio :label="3">普通商家</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选择注销商户账号名称：" prop="merchantId">
        <el-select v-model="ruleForm.merchantId" placeholder="请选择商户账号名称"  collapse-tags filterable  style="width: 270px;" :disabled="ruleForm.type == ''">
                <el-option :label="item.value" :value="item.id" v-for="(item,index) in merchantAccount" :key="index"></el-option>
            </el-select>
      </el-form-item>
    </el-form>
    <div class="dialog-footer" slot="footer">
        <el-button type="primary" @click="confirmSubmission('ruleForm')" class="primary" :loading="loadding">确认提交</el-button>
        <el-button  @click="handleClose">取消</el-button>
     </div>
  </ex-dialog>
  </template>
  <script>
  // api
  import { merchantLogoutApplySelect,logoutV1AdminLogOffApply } from "@/api/merchants/cancelAudit";
  export default {
    name: 'BeeTokenSystemH5AncelMerchant',
    props: {
      visible: Boolean,
      id: String,
    },
    data() {
      return {
        loadding:false,
        innerVisible: false,
        eventSatatus: '',
        merchantAccount:[],
        ruleForm:{
          merchantId:'',
          type:''
        },
        rules: {
            type: [
              { required: true, message: '请选择注销商户类型',trigger: 'change'} 
            ],
            merchantId: [
              { required: true, message: '请选择商户账号名称',trigger: 'change'} 
            ],
          }, 
      }
    },
    created() {

    },
    methods: {
      //选择注销商户类型切换   
      async inputChange(e){
        var params = { type:e}
        this.ruleForm.merchantId = ''
        var res = await merchantLogoutApplySelect(params)
        this.merchantAccount = res.result
      },
      // 确认提交  
      confirmSubmission(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
           this.loadding = true
           var data = {
              merchantId:this.ruleForm.merchantId
           }
           logoutV1AdminLogOffApply(data).then(vo=>{
            setTimeout(()=>{
                this.$message({
                  message: "提交成功",
                  type: "success",
                  duration: 1500,
                });
                this.$emit('success')
                this.loadding = false
            },1000)
           }).catch((error)=>{
              this.loadding = false
           })

            // this.$emit('success')
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        // this.$emit('success')
      },
      handleClose() {
        this.$emit('update:visible', false)
      },
    }
  }
  </script>
  <style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 20px 20px 20px;
    }
    ::v-deep .el-form-item{
      margin-bottom: 15px;
    }
    .primary{
        margin-right: 20px;
      }

  }
  </style>
  